<!-- 我的购物车列表 -->

<template>
    <page-view>
        <div class="w-full  my-shop-car-header bg-white   border-solid border-b-[2px] border-[#ff0000]">
            <div class="base-width py-[20px] flex flex-row justify-between ">
                <div class="flex flex-row items-end">
                    <img src="../../img/logo.png" class="w-[56px] h-[56px] cursor-pointer" @click="$router.push({name:'DataView'})" alt="">
                    <div class="flex-1 flex flex-row items-baseline ml-[40px]">
                        <div class="text-[22px]">我的购物车</div>
                        <p class="text-[12px] ml-2 text-gray-400">温馨提示：产品是否购买成功，是以最终下单为准哦，请尽快结算</p>
                    </div>
                </div>
                <div class="flex flex-row items-center ">
                    <el-dropdown>
                        <span class="el-dropdown-link text-gray-500 font-bold">
                            {{loginClientInfo.custom_realName}}
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>人个中心</el-dropdown-item>
                                <el-dropdown-item divided @click="logOut">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>

                    </el-dropdown>
                    <span class="mx-2 text-gray-400">|</span>
                    <span class="mx-2 text-gray-500">我的订单</span>
                </div>
            </div>
        </div>


        <div class="base-width mt-[50px]">
            <el-table style="width: 100%" max-height="600" @selection-change="shopCarTableSelectionChange"
                :data="myShopCarList" v-loading="isGetMyShopCarListLoading">
                <el-table-column type="selection" label="" width="100" align="center">

                </el-table-column>
                <el-table-column prop="date" label="商品图" width="180" align="center">
                    <template #default="{ row }">
                        <img class="w-[50px] h-[50px]" fit="cover" :src="row.goodsInfo.goods_photo[0]" alt="" />
                    </template>
                </el-table-column>
                <el-table-column prop="goodsInfo.goods_name" label="商品名称" width="180" align="center" />
                <el-table-column prop="goodsInfo.goods_sale_price" label="单价" align="center" />
                <el-table-column label="数量" align="center">
                    <template #default="{ row }">
                        <el-input-number v-model="row.car_goods_num" :min="1"
                            @change="(currentValue, newValue) => carGoodsNumChange(currentValue, newValue, row)" />
                    </template>
                </el-table-column>
                <el-table-column prop="goods_sale_price" label="小计" align="center">
                    <template #default="{ row }">
                        {{ row.goodsInfo.goods_sale_price * row.car_goods_num }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="{ row }">
                        <el-popconfirm title="确定要删除吗" @confirm="deleteShopCar(row.id)">
                            <template #reference>
                                <el-icon class="cursor-pointer">
                                    <Close />
                                </el-icon>
                            </template>
                        </el-popconfirm>
                    </template>

                </el-table-column>
            </el-table>

            <div
                class="computer-box bg-white text-[#839db9]  mt-[30px] flex flex-row justify-between items-center base-width h-[50px] mb-[30px]">
                <div class="flex flex-row ml-10">
                    <div>继续购物</div>
                    <span class="px-8">|</span>
                    <div>已选择<span class="text-[#ead41b] font-bold">{{ selectedRows.length }}</span>件商品</div>
                </div>
                <div class="left-box flex flex-row justify-center items-center h-full">
                    <span>合计：<span class="text-[25px] text-[#ead41b] ">{{ totalMoney }}</span>元</span>
                    <div class="ml-10">
                        <el-button type="success" class="to-computer " @click="toCheckoutOrder" :disabled="selectedRows.length <= 0">去结算
                        </el-button>
                    </div>
                </div>

            </div>

        </div>
    </page-view>
</template>


<script setup>
import { ref, inject, computed } from "vue";
import { ArrowDown, Close } from "@element-plus/icons-vue";
import { useRouter,useRoute } from "vue-router";
import API from "../../utils/API";
import {ElMessageBox} from "element-plus";

import {mainStore} from "../../store";
const loginClientInfo=ref(mainStore().loginClientInfo);
const baseURL = inject("baseURL");
const goodsInfo = ref({});
const route = useRoute();
const isLoading = ref(false);
const router = useRouter();
const store =mainStore();
/**
 * 获取我的购物车数据列表
 */
const myShopCarList = ref([]);
const isGetMyShopCarListLoading = ref(false);




const getMyShopCarList = () => {
    isGetMyShopCarListLoading.value = true;
    API.shopCarInfo.getMyShopCarList()
        .then(result => {
            console.log(result);
            result.forEach(item => {

                item.goodsInfo.goods_photo = JSON.parse(item.goodsInfo.goods_photo).map(item => baseURL + item)
                // console.log(item);
            })
            myShopCarList.value = result;

        })
        .finally(() => {
            isGetMyShopCarListLoading.value = false;
        })
}
getMyShopCarList();



/**
 * 购物车列表里面点击删除操作的事件方法
 * @param id
 */
const deleteShopCar = (id) => {
    API.shopCarInfo.deleteById(id)
        .then(() => {
            getMyShopCarList();
        })
}


/**
 *  购物车表格前面的得选框选中切换事件
 */
const selectedRows = ref([]);
const shopCarTableSelectionChange = (rows) => {
    selectedRows.value = rows;
    console.log(selectedRows.value);
}

/**
 * 商品数量改变
 */
const carGoodsNumChange = (currentValue, oldValue, row) => {
    if (currentValue < oldValue) {
        //购物车数据减少
        API.shopCarInfo.subToShopCar({ goods_id: row.goods_id })
    } else if (currentValue > oldValue) {
        //购物车数据增加
        API.shopCarInfo.addToShopCar({ goods_id: row.goods_id })
    }
}

/**
 * 计算属性，购物车总价
 */
const totalMoney = computed(() => {
    let totalMoney = 0;
    selectedRows.value.forEach(item => {
        totalMoney += item.goodsInfo.goods_sale_price * item.car_goods_num;
    })

    return totalMoney.toFixed(2);
})
/**
 * 退出登录
 */
 const logOut = () => {
  ElMessageBox.confirm("确定要退出登录吗？", "询问", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
      .then(() => {
        store.logOut();
        router.replace({name:"Login"})
      })
      .catch(() => {
        console.log("取消退出登录");
      })
}
/**
 * 去结算
 */

 const toCheckoutOrder=()=>{
  
        router.push({name: "checkoutOrder", params: {Ids: (selectedRows.value.map(item => item.id)).join(",")}});
    
 }
</script>
<style scoped lang="scss">
.to-computer {
    font-size: 20px;
    height: 50px;
    width: 150px;
}
</style>


